<template>
  <view class="video-item h-[100%]">
    <view class="text-[#222222] text-[32rpx]" v-if="showTime">{{
      videoContent.collectTime
    }}</view>
    <view class="my-[20rpx] flex flex-row items-center">
      <view class="w-[260rpx] h-[200rpx] mr-[20rpx]">
        <image
          :src="videoContent.videoPoster"
          mode="aspectFill"
          class="w-[260rpx] h-[200rpx] rounded-[16rpx]"
        />
      </view>
      <view class="h-[100%] flex flex-col justify-around grow">
        <view>
          <text class="text-[#222222] text-[28rpx] leading-[45rpx]">{{
            videoContent.videoTitle
          }}</text>
          <view
            class="text-[#666666] text-[24rpx] max-w-full overflow-hidden text-ellipsis line-clamp-2 mt-[12rpx] mb-[16rpx]"
            >{{ videoContent.videoContent }}</view
          >
        </view>
        <view class="flex flex-row items-center text-[22rpx] text-[#999999]">
          <image
            :src="videoContent.videoAvatar"
            mode="aspectFit"
            class="w-[38rpx] h-[38rpx] rounded-[50%] mr-[14rpx]"
          />
          <view>{{ videoContent.videoAuthor }}</view>
        </view>
      </view>
    </view>
    <view class="flex flex-row items-center justify-between">
      <view class="flex flex-row items-center">
        <image
          src="@/static/images/icon-clock.png"
          mode="aspectFit"
          class="w-[22rpx] h-[22rpx] mr-[4rpx]"
        />
        <view class="text-[#666666] text-[18rpx]">{{ videoContent.time }}</view>
      </view>
      <template v-if="showShare">
        <view class="flex flex-row items-center justify-end grow">
          <view class="flex flex-row items-center">
            <image
              src="@/static/images/icon-share.png"
              mode="aspectFit"
              class="w-[36rpx] h-[36rpx] mr-[12rpx]"
            />
            <view class="text-[#666666] text-[24rpx]">分享</view>
          </view>
          <template v-if="isCollect">
            <view
              class="flex flex-row items-center justify-end ml-[40rpx] w-[150rpx]"
              @click="isCollect = !isCollect"
            >
              <image
                src="@/static/images/icon-collect.png"
                mode="aspectFit"
                class="w-[36rpx] h-[36rpx] mr-[12rpx]"
              />
              <view class="text-[#666666] text-[24rpx]">收藏</view>
            </view>
          </template>
          <template v-else>
            <view
              class="flex flex-row items-center justify-end ml-[40rpx] w-[150rpx]"
              @click="isCollect = !isCollect"
            >
              <image
                src="@/static/images/icon-uncollect.png"
                mode="aspectFit"
                class="w-[36rpx] h-[36rpx] mr-[12rpx]"
              />
              <view class="text-[#666666] text-[24rpx]">取消收藏</view>
            </view>
          </template>
        </view>
      </template>
      <template v-if="showBack">
        <view>
          <button
            hover-class="none"
            class="bg-[#1E92F0] color-white text-[24rpx] rounded-[48rpx] w-[126rpx] h-[48rpx] leading-[48rpx]"
            @click="onSubmit"
          >
            回放
          </button>
        </view>
      </template>
      <template v-if="showBook">
        <view>
          <button
            hover-class="none"
            class="bg-[#1E92F0] color-white text-[24rpx] rounded-[48rpx] w-[126rpx] h-[48rpx] leading-[48rpx]"
            @click="onSubmit"
          >
            预约
          </button>
        </view>
      </template>
    </view>
    <view
      class="border-t-[1rpx] border-t-solid border-t-[#E8E9EC] mt-[25rpx]"
      v-if="showGapLine"
    ></view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const props = defineProps({
  videoContent: {
    type: Object,
    default: () => {},
  },
  showTime: {
    type: Boolean,
    default: true,
  },
  showShare: {
    type: Boolean,
    default: true,
  },
  showBack: {
    type: Boolean,
    default: false,
  },
  showBook: {
    type: Boolean,
    default: false,
  },
  showGapLine: {
    type: Boolean,
    default: true,
  },
});
const isCollect = ref(false);
const emit = defineEmits(["onMenuItem"]);
const onMenuItem = (item: any) => {
  emit("onMenuItem", item);
};
</script>

<style scoped lang="scss"></style>
